import React from 'react';
import {Card, Button, Modal} from 'antd';
import './ui.less';

export default class Modals extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      open: false,
      customFooter: false,
      topGaps: false,
      alignCenter: false,
    };
  }

  render() {
    return (
      <div>
        <Card title="基础模态框" className="card-wrap">
          <Button type="primary" onClick={() => this.handleOpen('open')}>Open</Button>
          <Button type="primary" onClick={() => this.handleOpen('customFooter')}>自定义页脚</Button>
          <Button type="primary" onClick={() => this.handleOpen('topGaps')}>顶部 20 px 弹框</Button>
          <Button type="primary" onClick={() => this.handleOpen('alignCenter')}>水平垂直居中</Button>
        </Card>

        <Card title="信息确认框" className="card-wrap">
          <Button type="primary" onClick={() => this.handleConfirm('confirm')}>Confirm</Button>
          <Button type="primary" onClick={() => this.handleConfirm('info')}>Info</Button>
          <Button type="primary" onClick={() => this.handleConfirm('success')}>Success</Button>
          <Button type="primary" onClick={() => this.handleConfirm('warning')}>Warning</Button>
        </Card>

        <Modal
          title="基础模态框"
          visible={this.state.open}
          onCancel={() => {
            this.setState({
              open: false
            });
          }}
        >
          <p>欢迎使用基础模态框</p>
        </Modal>

        <Modal
          title="基础模态框"
          visible={this.state.customFooter}
          okText="Next"
          cancelText="Cancel"
          onCancel={() => {
            this.setState({
              customFooter: false
            });
          }}
        >
          <p>欢迎使用基础模态框</p>
        </Modal>

        <Modal
          title="基础模态框"
          visible={this.state.topGaps}
          okText="Next"
          cancelText="Cancel"
          style={{top: "20px"}}
          onCancel={() => {
            this.setState({
              topGaps: false
            });
          }}
        >
          <p>欢迎使用基础模态框</p>
        </Modal>

        <Modal
          title="基础模态框"
          visible={this.state.alignCenter}
          okText="Next"
          wrapClassName="vertical-center-modal"
          cancelText="Cancel"
          onCancel={() => {
            this.setState({
              alignCenter: false
            });
          }}
        >
          <p>欢迎使用基础模态框</p>
        </Modal>

      </div>
    );
  }

  handleOpen = (type) => {
    this.setState({
      [type]: true
    });
  };

  handleConfirm = (type) => {
    Modal[type]({
      title: "Title",
      content: 'Your are content!',
      onOK() {
        console.log('ok');
      },
      onCancel() {
        console.log('cancel');
      },
    });
  }
}